<div class="twy-video scroll_top spaced-section" id="overview">
 <div class="{% unless section.settings.full_width %} page-width{% endunless %}">
  <div class="video_height">
    <div class="video_list" id="video_list">
    <div>
      <h2 class="title">{{ section.settings.heading }}</h2>
      {%- if section.settings.text != blank -%}
      <div class="text center">
        {{ section.settings.text }}
      </div>
    {%- endif -%}
    </div>
    </div>


  <div class="video-width">
    <div class="center">
      {% if section.settings.video != blank %}
        {{ section.settings.video }}
      {% endif %}

    </div>

  </div>
  </div>
 </div>
</div>

<script>
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }


    function initScrollMagic() {
      const tenwaysVideo = document.querySelector(".tenways-video_height");
      const tenwaysVideoText = tenwaysVideo.querySelector(".video_list");
      const tenwaysVideoWidth = tenwaysVideo.querySelector(".video-width");

     const VdController = new ScrollMagic.Controller();

    let scene4 = new ScrollMagic.Scene({
        duration: 100,
        triggerElement: tenwaysVideo,
        triggerHook: 0
      })
      .setPin(tenwaysVideo)
      .addTo(VdController); 

    const VtextAnim = TweenMax.fromTo(tenwaysVideoText, 1, { opacity: 0, top: '50%' }, { opacity: 1, top: '0%' });
    const VideoWidthAnim = TweenMax.fromTo(tenwaysVideoWidth, 1, { marginTop: '-30%' }, { marginTop: '0%' });

    let scene5 = new ScrollMagic.Scene({
      duration: 400,
      triggerElement: tenwaysVideo,
      triggerHook: 0.8
    })
    .setTween(VtextAnim)
    .addTo(VdController);   


    let scene13 = new ScrollMagic.Scene({
      duration: 400,
      triggerElement: tenwaysVideo,
      triggerHook: 0.8
    })
    .setTween(VideoWidthAnim)
    .addTo(VdController); 
      }


    
      if( !tooSmall ) {
        initScrollMagic();
      }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( VdController !== null && VdController !== undefined ) {
          VdController = VdController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( VdController === null || VdController === undefined ) {
          initScrollMagic();
        }
      }
    });


  })
</script> 



{% schema %}
  {
    "name": "Twy video new",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width twy-video tenways-video_height element_top",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "default": "Video",
        "label": "t:sections.video.settings.heading.label"
      }, {
        "type": "richtext",
        "id": "text",
        "label": "Text"
      }, {
        "type": "html",
        "id": "video",
        "label": "Video"
      }, {
        "type": "checkbox",
        "id": "full_width",
        "label": "t:sections.video.settings.full_width.label",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Twy video new"
      }
    ]
  }
{% endschema %}



